webpack 使用指南-绪论

在讲解 webpack 之前先回顾一下笔者在项目开发中的工作流变化.

jquery 时代

此时工作流大致为

• jquery 结合插件处理视图

• bootstap 处理样式

• lodash, underscore 等库

此时由于依赖少,手动引入各种标签,结合 phpstorm,chrome 调试界面

angularjs1.x 时代

• 利用指令,服务,控制器将逻辑拆分为多个 js 文件

• 利用 sass 编译 css,会将 scss 分为全局样式和组件样式.

• bower 下载各种依赖

此时任需要手动管理各种依赖.少做的事情包括

• css 采用 sass 集中编译压缩为一个文件

存在的问题.

• 需要手动载入多个 js 文件

• 需要管理不同 js 文件的依赖关系

angularjs1.x + node 进化版

• grunt 处理任务工作流(中途也用过 gulp 原理差不多),核心任务包括

  • watch 文件变化

  • 将 sass 的编译工作放入其中

  • 将分离的 js 文件打包合,混淆放入其中

  • 利用 browserify 管理 js 的依赖

• selenium 测试前端界面层

• karma + mocha 测试接口逻辑层

• npm script + shell 封装一些常用操作例如数据库导入,运行测试等

此时任需要手动加载资源,但是此时只用加载编译后的单个文件即可,少做的事情包括

• js 依赖引入减少

• 工作流半自动化

存在的问题

• 任需手动引入各种依赖

vue 时代

• 使用 vue-cli 一键初始化项目

• 编写 vue 模板,修改路由文件

• 使用 vuex,vue-source 等工具处理业务逻辑

可以看到整个项目的开发从原始的资源引用模式.
进化到基于后端 node 的编译开发时代.

webpack 作为一个工具完成了那些事情呢?

整合了从项目的资源引入到编译打包的一系列工作

基于此某种程度上可以讲 webpack 理解为现代前端开发中的编译器(原谅我的概念定义)

将各种不同的前端资源编译打包为一个可以在浏览器端运行的程序

从这个角度再看一下 webpack 的核心概念

• entry 入口文件.类似编译主文件,基于此解析依赖关系

• output 输出文件,编译结果

• loaders 加载器模块,用来解析编译不同的文件类型,例如将 sass 转为 css,typescript 编译为 js 等

• plugins 插件模块,在编译不同阶段执行任务,例如压缩混淆输出,启动 http 服务等

可以看到 webpack 将原来资源引入,编译,文件监听等各种任务,
分散到基于 loaders,plugins 的模块体系中完成.

在工作模式上 webpack 和 grunt,gulp 差不多.都是基于插件体系.
但是注意如下区别

• gulp,gurnt 更侧重解决多个任务的集成.之所以用来编译是基于你的配置的

• webpack 更侧重于解决资源的引用,编译打包,同时结合插件做更多的事情.

总结 webpack 的学习重点如下

• 核心配置选项的学习

• 各种 loaders 模块的配置学习

  实际上很多时候只需利用 npm 安装该 loaders 再引入即可

• 各种 plugins 模块的配置学习

学习 webpack 之前你需要那些基础呢?

1. 对前端的编译工作流有基本认识,知道为什么需要编译及它的价值?最好使用过
   browserify,grunt,gulp 等类似工具.

2. 对 node 有基础的学习,例如告诉我 npm 是如何查找依赖的?